{% extends 'mpa/common/base.html' %}
{% load static %}

{% block content %}
        <div class="wrapper">
            <div class="container">

                <!-- Page-Title -->
                <div class="row">
                    <div class="col-sm-12">
                        <div class="btn-group pull-right">
                            <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Settings <span class="m-l-5"><i class="fa fa-cog"></i></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <h4 class="page-title"> Notifications</h4>
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (top-left)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','top left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','top left','Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','top left','Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','top left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','top left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','top left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (top-right)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white', 'top right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                </div> <!-- End of Row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (top-center)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','top center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (left-middle)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','left middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                </div> <!-- End of Row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (right-middle)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','right middle', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (bottom-left)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','bottom left', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                </div> <!-- End of Row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (bottom-center)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','bottom center', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Notification (bottom-right)</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('info','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('success','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('warning','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('error','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.notify('black','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.notify('white','bottom right', 'Sample Notification', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                </div> <!-- End of Row -->

                <div class="row">
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Autohide in 5 seconds</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('info', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Info</a>
                                <a class="btn btn-success waves-effect waves-light autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('success', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('warning', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('error', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('black', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">Black</a>
                                <a class="btn btn-default waves-effect autohidebut" href="javascript:;" onclick="$.Notification.autoHideNotify('white', 'top right', 'I will be closed in 5 seconds...','Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae orci ut dolor scelerisque aliquam.')">White</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Confirm Notification</h3>
                            </div>
                            <div class="panel-body">
                                <a class="btn btn-info waves-effect waves-light" href="javascript:;" onclick="$.Notification.confirm('info','top left', 'Are you nuts?!')">Info</a>
                                <a class="btn btn-success waves-effect waves-light" href="javascript:;" onclick="$.Notification.confirm('success','top right', 'Are you nuts?!')">Success</a>
                                <a class="btn btn-warning waves-effect waves-light" href="javascript:;" onclick="$.Notification.confirm('warning','top center', 'Are you nuts?!')">Warning</a>
                                <a class="btn btn-danger waves-effect waves-light" href="javascript:;" onclick="$.Notification.confirm('error','bottom left', 'Are you nuts?!')">Error</a>
                                <a class="btn btn-inverse waves-effect waves-light" href="javascript:;" onclick="$.Notification.confirm('black','bottom center', 'Are you nuts?!')">Black</a>
                                <a class="btn btn-default waves-effect" href="javascript:;" onclick="$.Notification.confirm('white','bottom right', 'Are you nuts?!')">White</a>

                            </div>
                        </div>
                    </div>
                </div> <!-- End of Row -->
            </div>
            <!-- end container -->
        </div>
{% endblock %}

{% block static %}
    <script src="{% static 'mpa/plugins/notifyjs/dist/notify.min.js' %}"></script>
    <script src="{% static 'mpa/plugins/notifications/notify-metro.js' %}"></script>
    <script src="{% static 'mpa/plugins/notifications/notifications.js' %}"></script>
{% endblock %}
